<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-uWxY/CJNBR+1zjPWmfnSnVxwRheevXITnMqoEIeG1LJrdI0GlVs/9cVSyPYXdcSF" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
 function myFunction(id) { document.getElementById(id).submit(); }
 function QAslider(id,val) {
  $.get('http://{{{out("%s:%s/TQAE/slider/%s/",EM.IPAddress,EM.PORT,opts.id)}}}'+id+'/'+val)
 }
</script>
</head>
<body>

{{{ html.navbar(out,"/web/main") }}}

<div class="container my-5">
  <div class="row row-col-5"><div class="col"><h4>QuickApp {{{ local qa = EM.getQA(opts.id); out(qa.name)}}} UI</h4></div></div>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-6">
{{{
  local UI = EM.Devices[tonumber(opts.id)].UI or {}
  local qa = EM.getQA(tonumber(opts.id))
  local view = qa._view or {}
  local render = {
     ['button'] = function(out,c)
        out([[<button type="button" class="btn btn-secondary w-100"
              onclick="window.location.href='/TQAE/button/%s/%s'">%s</button>]],
          opts.id,c.name,view[c.name]['text'])
     end,
     ['slider'] = function(out,c)
        out([[<input
            type="range"
            onmouseup="QAslider('%s',value);"
            oninput="$('#L%s').text(value);"
            class="form-control-range w-100" max="99" min="0" value="%s">
        ]],c.name,c.name,view[c.name]['value'] or 0)
        out([[<label id="L%s">%s</label>]],c.name,view[c.name]['value'] or 0)
     end,
     ['label'] = function(out,c)
        out('<div class"m-1">%s</div>',view[c.name]['text']:fromutf8():htmlEsc())
     end,
  }
  for i,rows in ipairs(UI) do
    out([[<div class="row row-col-5 my-1">]])
    local cols = rows[1] and rows or {rows}
    for j,col in ipairs(cols) do
      out([[<div class="col p-0 mx-1">]])
      render[col.type](out,col)
      out("</div>")
    end
    out("</div>")
  end
}}}

    </div>
  </div>
</div>

{{{ html.footer(out) }}}
</body>
</html>
